<!-- eslint-disable @typescript-eslint/no-empty-object-type -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import CardContainer from './CardContainer.vue';
import axios from 'axios';
import { ref, onMounted } from "vue";

// 定义数据类型接口
interface Product {
  // 根据实际API响应定义产品字段
}

interface CardData {
  name: string;
  summary: string;
  productList: Product[]; // 为了更精确，可以进一步定义productList的类型，但根据错误，我们先解决当前问题
}
// 将data初始化为空数组，类型为CardData[]
const data = ref<CardData[]>([]);
// const data = ref("");


onMounted(async () => {
  try {
    const response = await axios.get(
      "https://api-v2.xdclass.net/api/card/v1/list"
    );
    console.log(response);
    data.value = response.data.data || [];
  } catch (err) {
    console.error(err);
  }
});
</script>

<template>
  <div class="flex flex-col gap-8 mt-10">
    <CardContainer
      v-for="(item, index) in data"
      :key="index"
      :title="item.name"
      :summary="item.summary"
      :productList="item.productList.slice(0, 4)"
    />
  </div>
</template>

<!-- CourseList.vue -->
<style scoped>
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.gap-8 {
  gap: 2rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
</style>
